<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-1.11.1.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
			outline: none;
		}
		body{
			background: url(image/1_180313091055_1.jpg) no-repeat center center fixed;
    		-webkit-background-size: cover;
   			-moz-background-size: cover;
    		-o-background-size: cover;
   			background-size: cover;
   			font-family: "微软雅黑";
		}
		li{
			list-style: none;
			position: relative;
		}
		.inner{
			margin:0 auto;
			width: 1480px;
			height: 1920px;
			overflow: hidden;
		}
		.inner .left{
			width: 408px;
			height: 600px;
			background-color: black;
			float: left;
			font-size: 20px;
			padding: 40px 0 0 50px;
			box-sizing: border-box;
			border-radius: 50px;
		}
		.inner .left #Date{
			margin-bottom: 10px;
			font-size: 30px;	
			color: white;
		}
		.inner .left #Time{
			margin-bottom: 10px;
			font-size: 26px;	
			color: white;
		}
		.inner .left .helloP{
			font-size: 26px;
			color: white;
			margin-bottom: 10px;
		}
		.inner .left .loadOut{
			font-size: 14px;
			color: #ccc;
			cursor: pointer;
		}
		.inner .left #photoImg{
			display: block;
			width: 300px;
			height: 260px;
			margin-bottom: 20px;
		}
		.inner .left #upImgLoad{
			background-image: url(image/timg.jpg);
		}
		.inner .right{
			width: 970px;
		box-sizing: border-box;
			padding: 50px 0 0px 150px;
			float: right;
		}
		.inner .right .saySomething{
			width: 700px;
			height: 160px;
			border:1px solid #ccc;
			box-sizing: border-box;
			opacity: 0.5;
			background-color: white;
			margin-bottom: 40px;
		}
		.inner .right .saySomething textarea{
			border:none;
			width: 540px;
			height: 100%;
			line-height: 12px;
			resize:none;
			font-size: 20px;
			padding-top: 10px;
			box-sizing: border-box;
			float: left;
		}
		.inner .right .saySomething .liuYanXuanXiang{
			float: left;
			width: 156px;
			height: 100%;
			text-align: center;
			line-height: 160px;
			font-size: 50px;
			cursor: pointer;
			border-left: 2px solid black;
			color: #ccc;
		}
		.inner .right #liuYanUl{
			width: 700px;
			position: relative;
		}
		.inner .right #liuYanUl li{
			width: 700px;
			height: 200px;
			background-color: #ccc;
			opacity: 0.6;
			transition: all 1s;
			position: absolute;
		}
		.inner .right #liuYanUl li img{
			position: absolute;
			top: 0;
			display: block;
			left: -200px;
			width: 200px;
			height: 200px;
		}
		.inner .right #liuYanUl li .delete{
			width: 40px;
			height: 40px;
			position: absolute;
			top: 0;
			right: 0;
			text-align: center;
			line-height: 40px;
			background-color: #ccc;
			color: black;
			opacity: 0.5;
			border-radius: 3px;
			border:1px solid white;
			font-size: 20px;
			cursor: pointer;
		}
		.inner .right #liuYanUl li .liuYanJiLu{
			position: absolute;
			width: 150px;
			height: 52px;
			font-size: 12px;
			top: 148px;
			left: 550px;
			text-align: right;
		}
		.inner .right #liuYanUl li .liuYanJiLu .liuYanDate{
			margin-bottom: 10px;
		}
		.inner .right #liuYanUl li .fix{
			position: absolute;
			width: 20px;
			height: 20px;
			left: 10px;
			top: 176px;
			border-radius: 10px;
			border:1px solid black;
			text-align: center;
			line-height: 20px;
			cursor: pointer;
		}
		.inner .right #liuYanUl li .fixArea{
			position: absolute;
			top: 0;
			left: 0;
			width: 540px;
			height: 150px;
			display: none;
			z-index: 1;
			resize:none;
		}
		.inner .right #liuYanUl li .fixSure{
			position: absolute;
			width: 20px;
			height: 20px;
			left: 50px;
			top: 176px;
			border-radius: 10px;
			border:1px solid black;
			text-align: center;
			line-height: 20px;
			cursor: pointer;
			display: none;
		}
	</style>
</head>
<body>
	<div class="inner">
		<div class="left">
			<div id="Date">
				<span id="year">00</span>
				<span class="Mao">-</span>
				<span id="mon">00</span>
				<span class="Mao">-</span>
				<span id="day">00</span>
			</div>
			<div id="Time">
				<span id="hour">00</span>
				<span class="Mao">:</span>
				<span id="min">00</span>
				<span class="Mao">:</span>
				<span id="sec">00</span>
			</div>
			<p class="helloP">
				<span class="hello">您好,</span>
				<span class="dOrName">嘿嘿嘿</span>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="loadOut">注销</span>
			</p>
			<img src="image/timg.jpg" alt="" id="photoImg">
			<input id="upLoadImg" type="file"/ name="image/timg.jpg">
		</div>
		<div class="right">
			<div class="saySomething">
				<textarea name="" id="liuYan" cols="30" rows="10"></textarea>
				<div class="liuYanXuanXiang">+</div>
			</div>
			<ul id="liuYanUl">	</ul>
		</div>
	</div>
	<script>
		$(function(){
			// 从前一个页面获取的Name在本页面保存
			var Name=window.name;
			window.name=Name;
			$(".dOrName").text(Name);

			//注销 返回登录页
			$(".loadOut").click(function(){
				window.name="";
				window.location.href="留言板登录.html";
			})
			//日期与时钟
			function timeChange(){
				var date=new Date;
				var n=date.getFullYear()
				var y=date.getMonth()
				var r=date.getDate()
				var h=date.getHours();
				var m=date.getMinutes();
				var s=date.getSeconds();
				//时钟与问好
				if (h<=9) {
					h="0"+h;
				}
				if (m<=9) {
					m="0"+m;
				}
				if (s<=9) {
					s="0"+s;
				}
				if (h>=0&&h<=8) {
					$(".hello").text("早上好,")
				}else if(h>8&&h<12){
					$(".hello").text("上午好,")
				}else if(h>=12&&h<14){
					$(".hello").text("中午好,")
				}else if(h>=14&&h<=18){
					$(".hello").text("下午好,")
				}else{
					$(".hello").text("晚上好,")
				}
				$("#hour").text(h);
				$("#min").text(m);
				$("#sec").text(s);
				//日期
				if (y<=9) {
					y="0"+y;
				}
				if (r<=9) {
					r="0"+r;
				}
				$("#year").text(n);
				$("#mon").text(y);
				$("#day").text(r);
			}
			var t=setInterval(timeChange,1000);

			//获取头像
			$("#upLoadImg").change(function(){
				var headPhoto=event.target.files[0].name;
				if (headPhoto) {
					// $("#photoImg").css({
					// 	"width":"300px",
					// 	"height":"300px",
					// })
					var x="image/"+headPhoto;
					$("#photoImg").attr("src",x)
				}
			})

			//点击提交留言内容
			$(".liuYanXuanXiang").click(function(){
				//获取文本框中的内容
				var liuYanVal=$("#liuYan").val();
				var x=$("#photoImg").attr("src");
				$("#liuYan").val("");
				//判断内容是否为空
				if (liuYanVal==""||liuYanVal==" "||liuYanVal=="  ") {
					alert("请您输入留言内容！");
				}else{
					//获取当前时间	
					var date=new Date;
					var n=date.getFullYear()
					var y=date.getMonth()
					var r=date.getDate()
					var h=date.getHours();
					var m=date.getMinutes();
					var s=date.getSeconds();

					

					//创造新的li
					var newLi=$("<li />");
					$("<img />").attr("src",x).appendTo(newLi);
					$("<p />").text(liuYanVal).addClass("innerP").appendTo(newLi);
					$("<div />").text("X").addClass("delete").appendTo(newLi);

					//在新的li里添加日期
					var newDateTime=$("<div />");
					var newDateDiv=$("<div />");
					$("<span />").text(n).appendTo(newDateDiv);
					$("<span />").text("年").appendTo(newDateDiv);
					$("<span />").text(y).appendTo(newDateDiv);
					$("<span />").text("月").appendTo(newDateDiv);
					$("<span />").text(r).appendTo(newDateDiv);
					$("<span />").text("日").appendTo(newDateDiv);
					//在新的li里添加时间
					var newTime=$("<div />");
					$("<span />").text(h).appendTo(newTime);
					$("<span />").text(":").appendTo(newTime);
					$("<span />").text(m).appendTo(newTime);
					$("<span />").text(":").appendTo(newTime);
					$("<span />").text(s).appendTo(newTime);

					//在新的li里添加修改按钮
					$("<span />").text("改").addClass("fix").appendTo(newLi);
					//在新的li里添加修改区域
					$("<textarea />").text(liuYanVal).addClass("fixArea").appendTo(newLi);
					//修改确认按钮
					$("<span />").text("是").addClass("fixSure").appendTo(newLi);
					//将留言日期和时间加入新的li
					newDateDiv.addClass("liuYanDate").appendTo(newDateTime);
					newTime.addClass("liuYanTime").appendTo(newDateTime);
					newDateTime.addClass("liuYanJiLu").appendTo(newLi);

					newLi.css("top",$("#liuYanUl li").length+1==0?"200px":$("#liuYanUl li").length*220+"px")
					newLi.appendTo($("#liuYanUl"));
					//新li的点击删除
					$(".delete").click(function(){
						$(this).parent().css({
							"margin-left":"700px",
							"opacity":"0"
						});
						if ($(this).parent().css("opacity")==0) {
							$(this).parent().remove();
						}
					})
					//点击修改
					$(".fix").click(function(){
						$(this).siblings(".fixArea").css("display","block");
						$(this).siblings(".fixSure").css("display","block");
						$(this).css("display","none");
					})
					//改完后保存
					$(".fixSure").click(function(){
						var k=$(this).siblings(".fixArea").val();
						$(this).siblings(".innerP").text(k);
						$(this).siblings(".fixArea").css("display","none");
						$(this).css("display","none");
						$(this).siblings(".fix").css("display","block");
					})
				}
			})
			
		})
	</script>
</body>
</html>